<template>
  <view class="vvip" style="display: flex;flex-direction: column;" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
    <!-- top -->
    <view class="top" style="padding: 10px 10px 0px 10px">
      <!-- ViP -->
      <view class="vip" style="width: 100%;display: flex;align-items: center;">
        <text style="font-size: 30px;font-weight: 700;color: #FFFCFC;flex: 1;">VIP专享</text>
        <image src="../../static/images/record_p1.png" style="width: 30px;height: 30px;margin-right: 10px;" />
        <text style="font-size: 28px;color: #FFFCFC;">v3</text>
      </view>

      <view style="display: flex;align-items: center;">
        <!-- progress -->
        <view style="display: flex;flex-direction: column; width: 60%;margin-top: 16px;">
          <!-- 文本 -->
          <text style="font-style: 16px;color: #FFFCFC;">成长值需要达到100</text>
          <!-- 进度条 -->
          <view class="progress" style="margin: 5px 0;">
            <view class="active-progress"></view>
          </view>
          <!-- v3 - v4 -->
          <view style="display: flex;justify-content: space-between;margin: 2px 10px;">
            <text style="font-style: 14px;color: #ECF0F1;">v3</text>
            <text style="font-style: 14px;color: #ECF0F1;">v4</text>
          </view>
        </view>

        <!-- images -->
        <view style="display: flex;align-items: flex-end;">
          <image src="../../static/images/1容器.png" style="width: 108px;height: 112px;" />
          <image src="../../static/images/路径 (1).png" style="width: 51px;height: 71px;margin-bottom: 10px;" />
        </view>
      </view>

    </view>

    <!-- bottom -->
    <view class="bottom" style="padding: 20px 10px 0px 10px;">

      <!-- tabs 最后一次运动数据 -->
      <view class="lastRunData">
        <view class="table">
          <!-- fileNames -->
          <view class="tr">
            <view class="th1">项目</view>
            <view class="th">标准</view>
            <view class="th">我的</view>
            <view class="th">标准度</view>
          </view>
          <!-- records -->
          <view class="tr" v-for="record in tableData" :key="record">
            <view style="width: 14%;margin-left: 5%;">{{ record.c1 }}</view>
            <view class="td">{{ record.c2 }}</view>
            <view class="td">{{ record.c3 }}</view>
            <view class="td">
              <image :src="record.c4" style="width: 16px;height: 16px;" />
            </view>
          </view>
        </view>
      </view>

      <!-- 视频动态分析 与 定制训练计划  -->
      <view style="display: flex;justify-content: space-between;height: 188px;margin-top: 20px;">
        <!-- 视频动态分析 -->
        <view style="width: 48%;background-color: #fff;border-radius: 8px;display: flex;flex-direction: column;">
          <!-- top -->
          <view style="padding: 10px 10px 4px 10px;display: flex;flex-direction: column;">
            <view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;">
              <span style="font-size: 16px;font-weight: 600;color: #3D3D3D;">视频动态分析</span>
              <image src="../../static/images/return_right.png" style="width: 7.24px;height: 10px;" />
            </view>
            <text style="font-size: 10px;margin-bottom: 2px;">全面跑步动作剖析</text>
            <text style="font-size: 10px;">逐帧动态观看</text>
          </view>
          <!-- bottom（pic） -->
          <image style="flex: 1;border-radius: 8px;"
            src="https://img.js.design/assets/img/65c07998062e29f4a9764794.jpg#22c8e0b5a2204df01bd14ddd5a45b372" />
        </view>
        <!-- 定制训练计划 -->
        <view style="width: 48%;background-color: #fff;border-radius: 8px;display: flex;flex-direction: column;">
          <!-- top -->
          <view style="padding: 10px 10px 4px 10px;display: flex;flex-direction: column;">
            <view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;">
              <span style="font-size: 16px;font-weight: 600;color: #3D3D3D;">定制训练计划</span>
              <image src="../../static/images/star.png" style="width: 7.24px;height: 10px;" />
            </view>
            <text style="font-size: 10px;margin-bottom: 2;">个性化定制</text>
          </view>
          <!-- bottom（pic） -->
          <image style="flex: 1;border-radius: 8px;" src="../../static/images/vip_ic1.png" />
        </view>
      </view>

      <!-- 智能视频推荐 -->
      <text
        style="line-height: 40px;text-align: center;font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 1)">智能视频推荐</text>
      <view class="recommend">
        <view class="recommendCard" v-for="recommendCard in recommendCardList" :key="recommendCard">
          <image style="width: 103px; height: 100%; border-radius: 5px" :src="recommendCard.pic"></image>
          <view style="
                  display: flex;
                  height: 80%;
                  flex-direction: column;
                  justify-content: space-between;
                  flex: 1;
                  margin-left: 16px;
                ">
            <text style="font-size: 16px;color: black;flex: 1;">{{ recommendCard.text }}</text>
            <image src="../../static/images/vip_ic2.png" style="width: 13px;height: 10px;margin-bottom: 4px;"></image>
            <text style="font-size: 14px;color: rgba(56, 56, 56, 1);">{{ recommendCard.sp }}</text>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script setup lang="ts">

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const tableData = [
  {
    'c1': '前倾',
    'c2': '10°~15°',
    'c3': '13°',
    'c4': '../../static/images/vip_top.png'
  },
  {
    'c1': '步频',
    'c2': '170~180',
    'c3': '186',
    'c4': '../../static/images/vip_bottom.png'
  },
  {
    'c1': '屈膝',
    'c2': '90°~95°',
    'c3': '75°',
    'c4': '../../static/images/vip_top.png'
  },
]

const recommendCardList = [
  {
    pic: '../../static/images/vip_pic1.png',
    text: '50米正确起跑 | 体测提高 ',
    sp: '爱跑步的人 66 人订阅',
  },
  {
    pic: '../../static/images/vip_pic2.png',
    text: '短跑脚掌落地技巧 ',
    sp: 'lablan跑不快     781 人订阅',
  },
]
</script>

<style scoped lang="css">
.vvip {
  display: flex;
  height: 100%;
  background: #3498DB;
}

/* 进度条 */
.progress {
  width: 195px;
  height: 10px;
  background-color: #225588;
  border-radius: 5px;
}

.active-progress {
  width: 20%;
  height: 100%;
  background-color: #ECF0F1;
  opacity: 0.9;
  border-radius: 5px;
}

.bottom {
  flex: 1;
  background-color: #ECF0F1;
  border-radius: 25px 25px 0 0;
}

/* 最后一次运动数据 */
.lastRunData {
  padding: 10px 10px;
  background-color: #fff;
  border-radius: 8px;
}

.table {
  width: 100%;
  border-radius: 10px;
}

.tr {
  display: flex;
  margin-bottom: 14px;
}

.th {
  width: 27%;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.8;
}

.th1 {
  width: 14%;
  margin-left: 5%;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.8;
}

.td {
  width: 27%;
  text-align: center;
  font-size: 14px;
}

/* 推荐 */
.recommendCard {
  height: 90px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 10px;
}
</style>
